<template>
	<view class="pay">
		<view class="header">
			<image :src="img" mode=""></image>
			<view class="name">
				<text class="userName">{{ name }}</text>
				<p class="userTitle">{{ title }}</p>
			</view>
		</view>	
		<p >需要支付金额</p>
		<view class="money">
			<button type="default" @click="checked()" :class="selected==true?'active':''" value="">{{money}}元</button>
		</view>
		
		<p >选择支付方式</p>
		<view class="content3">
			<radio-group class="radio">
				<label class="uni-list-cell uni-list-cell-pd" v-for="(item, index) in items" :key="index" @tap="payTotal(item.value)">
					<image :src="item.src" mode=""></image>
					<view class="name">{{ item.name }}</view>
					<view><radio :value="item.value" class="radioIpunt" /></view>
				</label>
			</radio-group>
		</view>
		
		<button type="default" style="background-color: #FF824A;color: #FFFFFF;width: 690upx;line-height:90upx;border-radius: 50upx;margin-bottom: 30upx;">立即支付</button>
		
	</view>
</template>

<script>
export default {
	data() {
		return {
			img: require('../../static/img/news/tupiana.png'),
			name: '娃哈哈',
			title: '我们什么都不擅长，只能坚持。',
			items: [
				{
					value: 'wx',
					name: '微信支付',
					src: require('../../static/img/news/wx.png')
				},
				{
					value: 'alipay',
					name: '支付宝支付',
					src: require('../../static/img/news/zhifubao.png')
				},
				{
					value: 'yue',
					name: '余额支付',
					src: require('../../static/img/news/yue.png')
				}
			],
			selected:false,
			money:'10'
			
		};
	},
	methods: {
		payTotal(value) {
			console.log(value);
		},
		checked(){
			if(this.selected==false){
					this.selected=true;
					console.log(this.money+"元")
			}else{
				this.selected=false;
			}
		
		}
	}
};
</script>

<style lang="scss">
.pay {
	width: 100%;
	height: 1500upx;
	background-color: #F5F6F7;
	.header{
		background: #FFFFFF;
		height: 158upx;
		padding-left:30upx ;
		padding-top:30upx;
		display:flex;
		image{
			width:100upx;
			height: 100upx;
			border-radius:50%;

		}
		.name{
			.userName{
				font-size: 32upx ;
				padding-left: 30upx;
				color: #333333 ;
			}
			.userTitle{
				font-size: 28upx;
				color: #999999;
			}
			
		}
		
	}
	p{
		margin: 30upx 0upx 30upx 30upx;
		font-size: 28upx;
		color: #989898;
	}
	.money{
		padding-left:30upx;
		margin-top:30upx;
		height:120upx;
		background-color:#F5F6F7;
		button{
			width: 690upx;
			height: 100upx;
			background:#FFFFFF;
			border-radius:8upx;
			margin:0upx 20upx 20upx 0upx;
			color: #999999;			
		}
		.active{
			color:#EE0F24;
			background:rgba(255,238,240,1);
			border:1px solid rgba(238,15,36,1);
		}
	}
	input{
		width: 650upx;
		margin-left:30upx;
		margin-top: 30upx;
		height:100upx;
		background-color: #FFFFFF;
		padding-left: 30upx;
	}
	.content3{
			width: 690upx;
			background-color: #ffffff;
			
			margin: 0 auto;
			margin-bottom: 100upx;
		.radio {
			width: 660upx;
		}
		
		image {
			width: 70upx;
			height: 70upx;
			top: 16upx;
			position: relative;
		}
		.name {
			width: 520upx;
			height: 100upx;
			font-size: 28upx;
		}
		.uni-list-cell {
			position: relative;
			display: flex;
			line-height: 100upx;
			border-bottom:1px solid #F5F6F7;
		}
	}
	
}
</style>
